<style lang="less" scoped>
  .title {
    width: 80%;
    margin: 0 auto;
    height: 50px;
    line-height: 50px;
    padding: 0 6px;
    cursor: pointer;
  }
  .Venue {
    width: 80%;
    margin: 0 auto;
    .sports {
      height: 60px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .sports-left {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .sport {
          width: 60px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          margin-right: 10px;
          border-radius: 6px;
          border: 1px solid #e0dfdf;
          cursor: pointer;
        }
        .sport:hover {
          color: #fff;
          background: #ff9b04;
        }
      }
      .sports-right {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .interval {
          width: 90px;
          height: 30px;
          line-height: 30px;
          background: #a5cfef;
          font-size: 12px;
          text-align: center;
          border-radius: 5px;
          color: #fff;
          cursor: pointer;
        }
        .intervals {
          width: 60px;
          height: 30px;
          line-height: 30px;
          background: #e9e9e9;
          font-size: 12px;
          text-align: center;
          border-radius: 5px;
          color: #000;
          margin: 0 10px;
          padding: 0 5px;
          cursor: pointer;
        }
      }
    }
    .resource-titles {
      float: left;
      width: 100px;
      height: 288px;
      color: #666;
      background: #fff;
      padding-left: 3px;
      overflow-y: auto;
      .resource-title_pk {
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-weight: 700;
        color: #000;
      }
      .resource-title {
        height: 40px;
        width: 75px;
        line-height: 40px;
        text-align: center;
        margin: 5px 0;
        cursor: pointer;
        border-radius: 6px;
      }
      .resource-title:hover {
        background-color: #f70;
        color: #fff;
      }
    }
    .resource-content {
      margin-left: 70px;
      height: 288px;
      padding: 0 10px;
      overflow-x: auto;
      white-space: nowrap;
      color: #666;
      background: #fff;
      .resource-items_pk {
        height: 40px;
        line-height: 40px;
        .resource-time {
          display: inline-block;
          width: 80px;
          margin-right: 2px;
          cursor: pointer;
        }
      }
      .resource-items {
        height: 40px;
        margin: 5px 0;
        .resource-item,
        .selecting {
          width: 80px;
          height: 40px;
          line-height: 40px;
          margin-right: 2px;
          display: inline-block;
          cursor: pointer;
          text-align: center;
          margin-bottom: 5px;
          border: 1px solid #ccc;
          border-radius: 4px;
          color: transparent;
          user-select: none;
          font-size: 30px;
        }
        .selecting {
          color: red;
          // background: url(../../../static/state.png) no-repeat center;
        }
      }
    }
    .el-collapse {
      display: flex;
      justify-content: space-between;
      position: relative;
      margin-bottom: 30px;
      .left {
        position: absolute;
        top: 0;
        left: 0;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #fed981;
        text-align: center;
        line-height: 30px;
        font-size: 12px;
        color: #fff;
        margin-top: 9px;
      }
      .right {
        position: absolute;
        right: 40px;
        top: 10px;
      }
      .btns {
        background: #a5cfef;
        color: #000;
      }
      .el-collapse-item {
        width: 1000px;
        flex: 1;
      }
    }
  }
</style>
<style>
  .el-collapse-item__header {
    margin-left: 40px;
  }

  .el-collapse-item__arrow {
    font-size: 18px;
    padding-top: 5px;
  }
</style>
<template>
  <div class="session">
    <div class="title">
      <span>场馆维护</span>
      /
      <span>场次设置</span>
    </div>
    <div class="Venue">
      <div class="demo-collapse">
        <el-collapse
          accordion
          v-model="activeName"
          @change="handleChange"
          v-for="(item, id, index) in stadiumList"
          :key="item.id"
        >
          <div class="left">
            <span>场馆</span>
          </div>
          <div class="right">
            <!-- Form -->
            <el-button class="btns" @click="to(item)">批量场次设置</el-button>
          </div>
          <el-collapse-item :title="item.name" :name="index">
            <div class="schedule">
              <el-tabs class="demo-tabs" :stretch="true">
                <el-tab-pane
                  :label="item"
                  v-for="(item, index) in days"
                  :key="index"
                  @click="day = index"
                ></el-tab-pane>
              </el-tabs>
            </div>
            <div class="sports">
              <div class="sports-left">
                <div
                  v-for="spo in item.sports"
                  :key="spo.id"
                  class="sport"
                  @click="sport = spo"
                >
                  {{ spo.sport_type_codeName }}
                </div>
              </div>

              <div class="sports-right">
                <div class="interval" @click="getStadium(15)">间隔15分钟</div>
                <div class="intervals" @click="getStadium(60)">间隔1小时</div>
                <el-icon color="#a5cfef" size="20px"><EditPen /></el-icon>
              </div>
            </div>
            <div class="resource-titles">
              <div class="resource-title_pk">场地 \ 时间</div>
              <div
                class="resource-title"
                v-for="item in fieldsList"
                :key="item.id"
              >
                {{ item.name || item.id }}
              </div>
            </div>
            <div class="resource-content">
              <div class="resource-items_pk">
                <span
                  class="resource-time"
                  v-for="session in sessions"
                  :key="session.starts"
                >
                  {{ session.starts }}
                </span>
              </div>
              <div
                class="resource-items"
                v-for="(item, y) in fieldsList.length"
                :key="y"
              >
                <span
                  :class="
                    arr.some(
                      (item1) => item1.x == x && item1.y == y && item1.id == id
                    )
                      ? 'selecting'
                      : 'resource-item'
                  "
                  v-for="(item, x) in X"
                  :key="{ x, y, id }"
                  @click="changbtn({ x, y, id })"
                >
                  ✔
                </span>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
        <!-- 模态框开始 -->
        <el-dialog v-model="showAdd" title="批量场次设置">
          <el-form :model="form" label-width="120px">
            <el-form-item label="日期类型">
              <el-radio-group v-model="form.resource">
                <el-radio
                  :label="item"
                  v-for="(item, index) in days"
                  :key="index"
                  @click="day = index"
                ></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="运动类型">
              <el-select v-model="form.region" placeholder="请选择运动类型">
                <el-option
                  :value="item.sport_type_codeName"
                  v-for="item in motion.sports"
                  :key="item"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="时间段">
              <div class="demo-time-range">
                <el-time-select
                  placeholder="开始时间"
                  v-model="startTime"
                  :max-time="endTime"
                  class="mr-4"
                  start="08:30"
                  step="00:15"
                  end="18:30"
                />
                <el-time-select
                  placeholder="结束时间"
                  v-model="endTime"
                  :min-time="startTime"
                  start="08:30"
                  step="00:15"
                  end="18:30"
                />
              </div>
            </el-form-item>
            <el-form-item label="场 地">
              <el-checkbox
                v-model="checked1"
                :label="item.name"
                size="large"
                v-for="item in fieldsList"
                :key="item.id"
              />
            </el-form-item>
            <el-form-item label="每场时长">
              <el-radio-group v-model="form.time">
                <el-radio label="15分钟" />
                <el-radio label="1小时" />
              </el-radio-group>
            </el-form-item>
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <!-- 用showEdit来区分是保存还是编辑 -->
              <el-button type="primary" @click="onSubmit">保存</el-button>
            </span>
          </template>
        </el-dialog>
        <!-- 模态框结束 -->
      </div>
    </div>
  </div>
</template>
<script setup>
  import { ElMessage } from 'element-plus';
  import { reactive } from 'vue';
  const activeName = ref('1');

  // do not use same name with ref
  const form = reactive({
    name: '',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    time: '',
    desc: '',
  });
  // 时间选择
  const startTime = ref('');
  const endTime = ref('');

  const onSubmit = () => {
    // console.log('submit!');
    // 批量设置场次
    postFileds_batch().then((res) => {
      console.log(res.data);
      if (res.data.code == 1) {
        ElMessage({
          type: 'success',
          message: '保存成功',
        });
        showAdd.value = false;
      }
    });
  };
  // 处理时间
  import dayjs from 'dayjs';
  // 响应类型
  import { ref, watch } from 'vue';
  // 接口
  import { GetStadium, GetFields, postFileds_batch } from '@/api/stadium.js';
  // 定义星期
  const days = [
    '周一',
    '周二',
    '周三',
    '周四',
    '周五',
    '周六',
    '周日',
    '节假日',
    '临时调整',
  ];
  // 场馆列表
  const stadiumList = ref([]);
  // 场地
  const fieldsList = ref([]);
  // 星期
  const day = ref(0);
  // 选择的运动类型
  const sport = ref(null);
  // 开放事件
  const openTime = ref([]); //运动类型对应的日期来获取
  // 分割时间
  const splitTime = ref(15);
  //时间 分段
  const sessions = ref([]);
  console.log(sessions.value);
  let X = ref('');
  let Y = ref('');

  // 运动类型
  const motion = ref([]);

  const to = (item) => {
    showAdd.value = true;
    motion.value = { ...item };
  };

  // 定义弹框是否信息
  const showAdd = ref(false);
  // 获取场馆的方法 asc正序 小到大 desc 倒序

  const getStadium = (time) => {
    GetStadium({ order: 'asc' }).then((res) => {
      stadiumList.value = res.data.data;
      getFields(res.data.data[0].sports[0].id);
      sport.value = res.data.data[0].sports[0];
      // console.log(sport.value['day1'], 'sport.value');
      openTime.value = sport.value['day' + (day.value + 1)].split(',');
      var arr = genTimeSession(
        openTime.value[0].split('-')[0],
        openTime.value[0].split('-')[1],
        time
      );
      sessions.value = arr;
      X.value = arr.length;
    });
  };
  // 默认获取一次
  getStadium();
  // 获取场地
  const getFields = (id) => {
    GetFields({ sport_id: id }).then((res) => {
      fieldsList.value = res.data.data;
      Y.value = fieldsList.value.length;
    });
  };

  // 写一个方法创建时间分段
  function genTimeSession(start = '08:00', end = '18:00', splitTime = 60) {
    // 返回的数据
    var arr = [];
    // 开始时间
    var startTime = dayjs('2023-06-20 ' + start);
    // 结束时间
    var endTime = dayjs('2023-06-20 ' + end);
    // 遍历100次
    for (var i = 0; i < 100; i++) {
      // 对象{starts:"08:00",ends:"09:00"}
      var obj = { starts: startTime.format('HH:mm') };
      // 结束时间等于在原有基础上加60分钟
      startTime = startTime.add(splitTime, 'minute');
      obj.ends = startTime.format('HH:mm');
      if (startTime.isSameOrBefore(endTime)) {
        arr.push(obj);
      } else {
        break;
      }
    }
    // console.log(arr);
    return arr;
  }
  const arr = ref([]);
  const changbtn = (obj) => {
    let a = arr.value.some(
      (item) => item.x == obj.x && item.y == obj.y && item.id == obj.id
    );
    setTimeout(() => {
      if (a) {
        let index = arr.value.findIndex(
          (item) => item.x == obj.x && item.y == obj.y && item.id == obj.id
        );
        arr.value.splice(index, 1);
      } else {
        arr.value.push(obj);
      }
    }, 200);
  };

  // 监听 splitTime 的变化
  watch(splitTime, (newValue) => {
    sessions.value = genTimeSession(
      openTime.value[0].split('-')[0],
      openTime.value[0].split('-')[1],
      newValue
    );
  });
</script>
